<div class="fade-in-right-big smooth">
  <div class="container w-xxl w-auto-xs">
    <a class="navbar-brand block m-t">{{app.name}}</a>
    <div class="m-b-lg">
      <div class="wrapper text-center">
        <strong>欢迎注册Angulr-Ng4</strong>
      </div>
      <form name="form" class="form-validation" #f="ngForm">
        <div class="text-danger wrapper text-center" (show)="authError">
          {{authError}}
        </div>
        <div class="list-group list-group-sm">
          <div class="list-group-item">
            <input name="name" placeholder="名称" class="form-control no-border" [ngModel]="user.name" required>
          </div>
          <div class="list-group-item">
            <input name="username" placeholder="帐号" class="form-control no-border" [ngModel]="user.username" required>
          </div>
          <div class="list-group-item">
            <input type="password" name="password" placeholder="密码" class="form-control no-border"
                   [ngModel]="user.password"
                   required>
          </div>
        </div>
        <div class="checkbox m-b-md m-t-none">
          <label class="i-checks">
            <input type="checkbox" name="agree" [ngModel]="agree" required>
            <i></i>
            同意 <a href="javascript:;">注册协议</a>
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" (click)="signup()" [disabled]='f.invalid'>注册</button>
        <div class="line line-dashed"></div>
        <p class="text-center">
          <small>已经有帐号？</small>
        </p>
        <a routerLink="/signin" class="btn btn-lg btn-default btn-block">登录</a>
      </form>
    </div>

  </div>
</div>
